<template>
  <div class="road-way-information information-hall info-1200">
    <!-- 标题 -->
     <div class="server_titleBox">
          <div class="server_title">
            <span class="line"></span>
            <span class="main_titles">信息大厅</span>
            <span class="line"></span>
          </div>
          <p class="under_title">Information on the hall</p>
        </div>
        <!-- 信息展示内容 -->
        <div class="info-content">
          <!-- 线路信息开始 -->
          <div class="info-road">
            <div class="info-title">
               <div class="info-name">
                <img src="./../../../static/img/index/xianluxinxi.png">
                <span>线路信息</span>
               </div>
               <div class="info-links">
                  <nuxt-link v-if="tabPane==1" to="/transport">更多国内线路</nuxt-link>
                  <nuxt-link v-if="tabPane==2" to="/transport">更多国际线路</nuxt-link>
               </div>
            </div>
            <div class="road-tab-list" >
              <div class="road-tab-content">
                <!-- 选择城市 -->
                <a-select v-if="tabPane==1" v-model="fromCity" style="width:100px;" class='choose-city' @change="roadCityChange"> 
                  <a-select-option value="昆明市">昆明出发</a-select-option>
                  <a-select-option value="大理市">大理出发</a-select-option>
                  <a-select-option value="玉溪市">玉溪出发</a-select-option>
                </a-select>
                <a-select v-if="tabPane==1"  v-model="lineType" style='width:100px;' class='choose-way' @change="roadWayChange">
                  <a-select-option value="1">公路运输</a-select-option>
                  <a-select-option value="2">铁路运输</a-select-option>
                  <a-select-option value="3">航空运输</a-select-option>
                  <a-select-option value="4">海路运输</a-select-option>
                  <a-select-option value="5">水路运输</a-select-option>
                </a-select>
                <!-- 切换数据 -->
                <a-tabs type="card"  defaultActiveKey="1" @change="tabPaneChange">
                  <a-tab-pane tab="国内线路" key="1">
                    <div class="card-change"> 
                        <ul v-if="lineType==1">  
                            <li :class="transType==''?'active':''" @click="linkTypeClick('')">全部</li>
                            <li :class="transType==item.dictKey?'active':''" v-for="(item,index) in highwayList" @click="linkTypeClick(item.dictKey)" :key="index">{{item.dictValue}}</li>
                        </ul>
                        <ul v-if="lineType==2">  
                            <li :class="transType==''?'active':''" @click="linkTypeClick('')">全部</li>
                            <li :class="transType==item.dictKey?'active':''" v-for="(item,index) in railwayList" @click="linkTypeClick(item.dictKey)" :key="index">{{item.dictValue}}</li>
                        </ul>
                        <ul v-if="lineType==3">  
                            <li :class="transType==''?'active':''" @click="linkTypeClick('')">全部</li>
                            <li :class="transType==item.dictKey?'active':''" v-for="(item,index) in seawayList" @click="linkTypeClick(item.dictKey)" :key="index">{{item.dictValue}}</li>
                        </ul>
                        <ul v-if="lineType==4">  
                            <li :class="transType==''?'active':''" @click="linkTypeClick('')">全部</li>
                            <li :class="transType==item.dictKey?'active':''" v-for="(item,index) in airlineList" @click="linkTypeClick(item.dictKey)" :key="index">{{item.dictValue}}</li>
                        </ul>
                    </div>  
                    <div class="car-cont-main"  v-if="lineType != 5"> 
                            <roadway-infomation :list="list"></roadway-infomation>
                    </div>  
                    <!-- 水路 -->
                    <div  v-if="lineType == 5" class="car-cont-main">
                         此功能即将开放
                    </div>
                  </a-tab-pane>
                  <a-tab-pane tab="国际线路" key="2">
                    <div class="card-change"> 
                        <ul>  
                            <li class="active">全部</li>
                            <!-- <li>整车</li>
                            <li>零车</li>
                            <li>冷链</li> -->
                        </ul>
                    </div>  
                    <div class="car-cont-main"> 
                     此功能即将开放
                        <!-- <roadway-infomation :list="list"></roadway-infomation> -->
                    </div>  
                  </a-tab-pane>
               </a-tabs>
              </div>
              <!-- 线路右边 -->
              <div v-if="tabPane==1" class="road-pic-right">
                  <nuxt-link to="../corp">
                      <img src="./../../../static/img/index/roadcar.png">
                  </nuxt-link>
              </div>
              <div v-if="tabPane==2" class="road-pic-right">
                 <nuxt-link to="../corp">
                      <img src="./../../../static/img/index/line_guoji.jpg">
                  </nuxt-link>
              </div>
            </div>
          </div>
          <!-- 线路信息结束 -->

        </div>
  </div>
</template>
<script>
import RoadwayInfomation from './RoadwayinformationList'
  export default{
    data() {
      return {
        // 线路类型 1公路 2铁路 3航空 4海路
        lineType: '1',
        transType: '',
        fromCity: '昆明市',
        list: [],
        tabPane: 1,
        highwayList: [],
        railwayList: [],
        seawayList: [],
        airlineList: []
      }
    },
    components: {
      RoadwayInfomation
    },
    created(){
        // 公路运输类型
        this.infoCommonDict(11);
        // 铁路运输类型
        this.infoCommonDict(12);
        // 海路运输类型
        this.infoCommonDict(13);
        // 航空运输类型
        this.infoCommonDict(23);
        this.lineGetSelectLines();
    },
    methods: {
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type
          })
          if (res.status) {
            switch(type){
              case 11: this.highwayList = res.data.rows; break;
              case 12: this.railwayList = res.data.rows; break;
              case 13: this.airlineList= res.data.rows; break;
              case 23: this.seawayList = res.data.rows; break;
            }
          } 
      },
      // 线路列表查询 
      async lineGetSelectLines () {
          const res = await this.$store.dispatch('info/lineGetSelectLines',{
            lineType: this.lineType,
            fromCity: this.fromCity,
            transType: this.transType,
            pageSize: 6,
            pageIndex: 1,
          })
          if (res.status) {
            this.list = res.data && res.data.rows || [];
          } 
      },
      // 国内 国际切换回调
      tabPaneChange (key) {
        this.tabPane = key;
      },
      roadWayChange(key) {
        this.lineType = key;
        this.transType = '';
        this.lineGetSelectLines();
      },
      // 国内城市切换
      roadCityChange(value) {
        this.fromCity = value;
        this.lineGetSelectLines();
      },
      // 线路类型下子类型切换
      linkTypeClick (key) {
        this.transType = key;
        this.lineGetSelectLines();
      }
    }
  }
</script>
<style lang="scss">
.road-way-information{
  .car-cont-main{
      font-size: 24px;
      padding-top: 20px;
  }
  .info-title{
    border-bottom:1px solid #D8D8D8;
  }
  .road-tab-list{
      width:1200px;
      height:402px;
  }
  .road-tab-content{
      width:940px;
      height:330px;
      float:left;
     position:relative;
     margin-top:2px;
     .ant-tabs{
         width:940px;
         .ant-tabs-nav-wrap{
            margin-bottom:0 !important;
            margin-top: 10px;
            margin-left:10px;
        }
        .ant-tabs-bar{
          margin-bottom:15px;
        }
        .ant-tabs-tab{
          width:90px;
          height:30px;
          line-height:30px !important;
          border-radius:2px !important;
          border:none !important;
          background:none !important;
          margin-right:0 !important;
          font-size:16px !important;
          color:#333333 !important;
        }
        .ant-tabs-tab-active{
          background:#15837A !important;
          border-radius:2px;
          color:#FFFFFF !important;
          padding-bottom:0 !important;
        }
        .ant-tabs-card-content{
            margin-top:10px;
            width: 940px;
            height: 345px;
            border: 1px solid #D8D8D8;
        }
     }
     //筛选
    .ant-select {
      position:absolute;
       right:0;
       top:3%;
       z-index:9;
    }
    .choose-city{
      right:12%;
    }
  }
  .road-pic-right{
    width:239px;
    height:393px;
    float:right;
    margin-left:15px;
    margin-top: 6px;
    img{
      width:100%;
      height:100%;
    }
  }
  .ant-select-selection--single{
    height:30px;
  }
  .card-change{
        width:80px;
        height:345px;
        border-right:1px solid #D8D8D8;
        float:left;
        ul{
          margin:0;
          li{
              width: 60px;
              height: 28px;
              text-align: center;
              line-height: 28px;
              margin: 0 auto;
              margin-top: 18px;
              font-size:14px;
              color:#666666;
              cursor: pointer;
          }
          li.active{
            background:#15837A;
            color:#FFFFFF;
          }
        }
  }
  .car-cont-main{
    text-align: center;
    ul{
        margin:0;
          li{
              width:258px;
              height:140px;
              background:r#FFFFFF;
              border:1px solid #EEEEEE;
              overflow:hidden;
              float:left;
              margin-top:21px;
              margin-left:21px;
              .road-title{
                 width:258px;
                 height:50px;
                 line-height:50px;
                 background:#EEF8F7;
                 span{
                    font-size:16px;
                    color:#333333;
                    font-weight:400;
                    display:inline-block;
                    vertical-align: middle;
                 }
                 img{
                  margin-left:5px;
                  margin-right:5px;
                 }
                 span:first-child{
                    margin-left: 16px;
                 }
                 span:last-child{
                    float:right;
                    font-size:14px;
                    margin-right:20px;
                    color:#666666;
                 }
              }
              p{
                 margin: 0;
                 margin-left: 16px;
                 font-weight: 400;
                 font-family: SourceHanSansCN-Regular;
                 margin-top:8px;
                 font-weight:bold;
                i{
                  font-style:normal;
                  font-size:26px;
                  color:#15837A;
                  font-weight:bold;
                  font-family:SourceHanSansCN-Bold;
                  margin-right:4px;
                }
                i.size-24{
                  font-size:22px;
                }
                span{
                  font-size:14px;
                }
              }
              .road-money{
                margin-left:15px;
                p{
                  display:inline-block;
                  margin-top:5px;
                }
                  span{
                    font-size:14px;
                    color:#666666;
                    display:inline-block;
                    padding-top:4px;
                    i{
                        color:#F5B12E;
                        font-size:16px;
                        font-style:normal;
                    }
                  }
                  button{
                      width:80px;
                      height:30px;
                      outline:none;
                      border:none;
                      font-size:14px;
                      color:#FFFFFF;
                      text-align:center;
                      line-height:30px;
                      background:#15837A;
                      float: right;
                      margin-right: 12px;

                  }
              }
              .road-lf{
                    margin-left:0px !important;
                    p{
                      margin-top:0;
                    }
                    button{
                      margin-top:6px !important;
                    }
              }
            }
        }
  }
  //航空
  .air-content{
      width: 818px !important;
      float: none !important;
      margin-top: 0 !important;
      position: relative;
      left: 20px;
      .air-left-time{
        width: 60px;
        height: 140px;
        border-right: 1px solid #DEDEDE;
        background: #EEF8F7;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #15837A;
        padding-top: 40px;
        float: left;
        span{
          display: block;
        }
      }
  }
  .air-content:nth-child(even){
     top: 20px;
  }
  .air-right-detail{
      float: right;
      width: 756px;
      //剩余仓位
      .air-surplus{
        margin-top: 15px;
        width: 723px;
        span:nth-child(1){
            position: absolute;
            left: 98px;
            top: 28px;
        }
        .ant-progress{
          width: 430px;
          margin-left: -16px;
        }
        .ant-progress-text{
          padding-left: 15px;
        }
        span{
            font-size: 14px;
            color: #333333;
            vertical-align: middle;
        }
        span:nth-child(3){
            margin-left: 25px;
            position: absolute;
            top: 28px;
        }
       .ant-progress-inner{
          background-color: #FE4040;
      }
      .ant-progress-bg{
          background-color: #FFDFDF;
          border-radius: 0 10px 10px 0 !important;
          float: right;
      }
      }
      //航空公司
      .air-company-road{
          margin-top: 10px;
          .air-fly{
               width: 20px;
               height: 15px;
               float: left;
               margin-left: 15px;
               margin-right: 4px;
               img{
                  width: 100%;
                  height: 100%;
                  vertical-align: middle;
               }
          }
          //航空信息
          .air-comany-name{
              width: 56px;
              text-align: center;
              float: left;
              margin: 10px 6px 0 4px;
              span{
                display: block;
                font-size: 14px;
              }
              span:first-child{
                 color: #333333;
              }
              span:last-child{
                  color: #666666;
              }
          }
          //线路中转
          .air-road-change{
            float: left;
            width: 574px;
            text-align: center;
            .air-start-place{
              float: left;
							margin-right: 20px;
							margin-left: 14px;
							text-align: center;
							width: 128px;
              span{
                 display: block;
                 color: #15837A;
              }
              span:first-child{
                  font-size: 20px;
              }
               span:last-child{
                  font-size: 16px;
              }
            }
            .air-line{
              float: left;
              color: #666666;
              font-size: 14px;
              .air-line-pic{
                 width:  244px;
                 height: 16px;
                 position: relative;
                 img{
                     width: 100%;
                     height: 100%;
                     position: absolute;
                     left: 0;
                     top: 50%;
                     margin-top: -8px;
                 }
              }
              .air-arrive-time{
                  margin-top: 10px;
              }
            }

          }
          //到达
          .air-end-place{
							width: 145px;
              float: left;
              margin-left: 20px;
              span{
                 display: block;
                 color: #15837A;
              }
              span:first-child{
                  font-size: 20px;
              }
               span:last-child{
                  font-size: 16px;
              }
          }
          //机票价格
          .air-price{
            float: left;
            font-size: 14px;
            color: #000000;
            margin-left: 8px;
            i{
               font-size: 24px;
               color: #FEB72D;
            }
          }
      }
  }
}
</style>